<html>

<head>
	<title>openvidu-hark-events</title>
	<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"
		integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<link rel="styleSheet" href="style.css" type="text/css" media="screen">
	<script src="openvidu-browser-2.20.0.js"></script>
	<script src="app.js"></script>
</head>

<body>
	<div id="join">
		<h1>Join a video session</h1>
		<form onsubmit="joinSession(); return false">
			<p>
				<label>Session:</label>
				<input type="text" id="sessionId" value="SessionA" required>
			</p>
			<p>
				<input type="submit" value="JOIN">
			</p>
		</form>
	</div>

	<div id="session" style="display: none;">

		<h1 id="session-header"></h1>
		<input type="button" onclick="leaveSession()" value="LEAVE">

		<div>
			<h4>Session</h4>

			<input type="button" onclick="onPublisherStartSpeakingSession()" value="onPublisherStartSpeakingSession">
			<input type="button" onclick="oncePublisherStartSpeakingSession()"
				value="oncePublisherStartSpeakingSession">
			<input type="button" onclick="offPublisherStartSpeakingSession()" value="offPublisherStartSpeakingSession">
			<input type="button" onclick="onPublisherStopSpeakingSession()" value="onPublisherStopSpeakingSession">
			<input type="button" onclick="oncePublisherStopSpeakingSession()" value="oncePublisherStopSpeakingSession">
			<input type="button" onclick="offPublisherStopSpeakingSession()" value="offPublisherStopSpeakingSession">
		</div>

		<div>
			<h4>Publisher</h4>

			<input type="button" onclick="onPublisherStartSpeakingPublisher()"
				value="onPublisherStartSpeakingPublisher">
			<input type="button" onclick="oncePublisherStartSpeakingPublisher()"
				value="oncePublisherStartSpeakingPublisher">
			<input type="button" onclick="offPublisherStartSpeakingPublisher()"
				value="offPublisherStartSpeakingPublisher">
			<input type="button" onclick="onPublisherStopSpeakingPublisher()" value="onPublisherStopSpeakingPublisher">
			<input type="button" onclick="oncePublisherStopSpeakingPublisher()"
				value="oncePublisherStopSpeakingPublisher">
			<input type="button" onclick="offPublisherStopSpeakingPublisher()"
				value="offPublisherStopSpeakingPublisher">
			<input type="button" onclick="onStreamAudioVolumeChangePublisher()"
				value="onStreamAudioVolumeChangePublisher">
			<input type="button" onclick="onceStreamAudioVolumeChangePublisher()"
				value="onceStreamAudioVolumeChangePublisher">
			<input type="button" onclick="offStreamAudioVolumeChangePublisher()"
				value="offStreamAudioVolumeChangePublisher">
		</div>

		<div>
			<h4>Subscriber</h4>

			<input type="button" onclick="onPublisherStartSpeakingSubscriber()"
				value="onPublisherStartSpeakingSubscriber">
			<input type="button" onclick="oncePublisherStartSpeakingSubscriber()"
				value="oncePublisherStartSpeakingSubscriber">
			<input type="button" onclick="offPublisherStartSpeakingSubscriber()"
				value="offPublisherStartSpeakingSubscriber">
			<input type="button" onclick="onPublisherStopSpeakingSubscriber()"
				value="onPublisherStopSpeakingSubscriber">
			<input type="button" onclick="oncePublisherStopSpeakingSubscriber()"
				value="oncePublisherStopSpeakingSubscriber">
			<input type="button" onclick="offPublisherStopSpeakingSubscriber()"
				value="offPublisherStopSpeakingSubscriber">
			<input type="button" onclick="onStreamAudioVolumeChangeSubscriber()"
				value="onStreamAudioVolumeChangeSubscriber">
			<input type="button" onclick="onceStreamAudioVolumeChangeSubscriber()"
				value="onceStreamAudioVolumeChangeSubscriber">
			<input type="button" onclick="offStreamAudioVolumeChangeSubscriber()"
				value="offStreamAudioVolumeChangeSubscriber">
		</div>

		<div id="handlers">
			<h4>Handlers</h4>
			<div id="publisherStartSpeakingSession">
				<h5>publisherStartSpeaking (Session)</h5>
			</div>
			<div id="publisherStopSpeakingSession">
				<h5>publisherStopSpeaking (Session)</h5>
			</div>
			<div id="publisherStartSpeakingPublisher">
				<h5>publisherStartSpeaking (Publisher)</h5>
			</div>
			<div id="publisherStopSpeakingPublisher">
				<h5>publisherStopSpeaking (Publisher)</h5>
			</div>
			<div id="streamAudioVolumeChangePublisher">
				<h5>streamAudioVolumeChange (Publisher)</h5>
			</div>
			<div id="publisherStartSpeakingSubscriber">
				<h5>publisherStartSpeaking (Subscriber)</h5>
			</div>
			<div id="publisherStopSpeakingSubscriber">
				<h5>publisherStopSpeaking (Subscriber)</h5>
			</div>
			<div id="streamAudioVolumeChangeSubscriber">
				<h5>streamAudioVolumeChange (Subscriber)</h5>
			</div>
		</div>

		<div>
			<div id="publisher">
				<h3>YOU</h3>
			</div>
			<div id="subscriber">
				<h3>OTHERS</h3>
			</div>
		</div>
	</div>
</body>

</html>